<template>
    <div>
         <div class="add">
            <van-icon name="user-circle-o" size="80px" color="#ccc" />
        </div>
    <div class="rnote">
        <span style="float:left;" @click="note()">短信登录</span><span style="float:right;font-size:16px">密码登录</span>
    </div>
 

<input type="text" placeholder="请输入手机号" v-model="username" class="ipt">


<input type="text" placeholder="请输入密码" v-model='password' class="ipt">

<div class="login" @click="register()">登录</div>
<div class="zc">
    <span style="float:left" @click="tap()">账号注册</span> <span style="float:right" @click="pass()">忘记密码?</span>
</div>
<div class="spas">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 15px' }">
        第三方登录
    </van-divider>
</div>
<div class="tu">
     <i class="iconfont icon-QQ"></i><i class="iconfont icon-weixin"></i>
</div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
             username:'',
            password:''
        }
    },
    methods:{
        tap(){     
            this.$router.push('/zcymfb')
        },
        note(){
            this.$router.push('/dxdlfb')   
        },
        pass(){
             this.$router.push('/wjmmfb')  
        },

          register (){
              if(this.username==""&& this.password==''){
                        alert('请输入用户名和密码')
              }else{
             axios({
                method: "get",
                url:"http://jx.xuzhixiang.top/ap/api/login.php",
                params:{username:this.username,password:this.password} 
                }).then(data => {
                     console.log(data);
                     if(data.data.code==1){
                       this.$router.push('/zyfb')
                     }else{
                         alert('用户名或者密码错误')
                     }
                });
              }       
        }  
    }
}

</script>

<style scoped="">
.add{
    width: 105px;
    height: 105px;
    margin:46px auto  0;
    }
.rnote{
    width: 200px;
    height: 16px;
    margin: 20px auto 10px;
    line-height: 16px
}
.ipt{
    width: 280px;
    height: 50px;
    margin:20px auto 0
}
.login{
    width: 280px;
    height: 50px;
    margin: 30px auto 0;
    border: 1px solid #ccc;
    line-height: 50px;
   background:#26a2ff;
    color: #fff;
    font-size: 16px;
}
.zc{
    width: 280px;
    margin: 5px auto 0
}
.spas{
    margin: 200px auto 30px;
    width:330px;
}
.tu{
    display: flex;
    justify-content: space-around
}
.iconfont{font-size:45px;}

</style>
